<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        function loadImage(url) {
            return new Promise((resolve, reject) => {
                const image = new Image()
                image.onload = () => resolve(image)
                image.onerror = () => reject(new Error(`Failed to load image from ${url}`))
                image.src = url
            })
        }

        async function showImage() {
            try {
                const image = await loadImage('https://gitee.com/gaohj5/2023-jn-html5-2302/blob/master/%E5%9B%9E%E8%B0%83%E5%9C%B0%E7%8B%B1.jpeg')
                document.body.appendChild(image)
            } catch (error) {
                console.error(error)
            }
        }

        showImage()
    </script>
</body>

</html>